/* eslint-disable react-refresh/only-export-components */
import React from "react";
import { getLocation, getSwiper } from "../../../api/info";
import styles from "./css/home.module.css";
import { useLoaderData, useNavigate } from "react-router-dom";
import { Button, SearchBar, Space, Swiper, Tag } from "antd-mobile";
import {
  LocationFill,
  FlagOutline,
  UserOutline,
  FillinOutline,
  TruckOutline,
  CouponOutline,
  TravelOutline,
  BillOutline,
  GlobalOutline,
  CalendarOutline,
  CollectMoneyOutline,
  TransportQRcodeOutline,
  UnlockOutline,
} from "antd-mobile-icons";
function Index() {
  let nav = useNavigate();
  const goCity = () => {
    nav("/city");
  };
  const goTicket = () => {
    nav("/ticket");
  };
  let { swiper, location } = useLoaderData();
  const items = swiper.map((item, index) => (
    <Swiper.Item key={index}>
      <img src={item.image} style={{ width: "100%", height: "120px" }} />
    </Swiper.Item>
  ));
  let arr = ["丽江", "成都", "哈尔滨", "坝上草原", "三亚", "亲子游", "西藏"];
  return (
    <div className={styles.box}>
      <div className={styles.topbox}>
        <span style={{ color: "#7c26ca", position: "fixed", top: "12px" }}>
          <LocationFill fontSize={22} />
          {location}出发
        </span>
        <SearchBar
          placeholder="搜索目的地/景点/线路"
          style={{ "--padding-left": "100px" }}
        />
        <span style={{ position: "fixed", top: "13px", right: "12px" }}>
          <Button color="primary" size="mini">
            搜索
          </Button>
        </span>
        <div className={styles.citybox}>
          {arr.map((item, i) => (
            <Tag
              onClick={goCity}
              key={i}
              round
              style={{ padding: "5px", marginRight: "10px" }}
              color="#af83eb"
            >
              {item}
            </Tag>
          ))}
        </div>
      </div>
      <div className={styles.shbox}>
        <Space style={{ "--gap": "2px" }}>
          <span className={styles.sh}>旅游</span>
          <span className={styles.yi}>
            <FlagOutline fontSize={20} />
            跟团游
          </span>
          <span className={styles.yi}>
            <UserOutline fontSize={20} />
            自由行
          </span>
          <span className={styles.yi}>
            <FillinOutline fontSize={20} />
            定制包团
          </span>
          <span className={styles.yi}>
            <TruckOutline fontSize={20} />
            自驾游
          </span>
        </Space>
        <Space style={{ "--gap": "2px", margin: "5px 0" }}>
          <span className={styles.ee}>票务</span>
          <span className={styles.er} onClick={goTicket}>
            <CouponOutline fontSize={20} />
            景区门票
          </span>
          <span className={styles.er}>
            <TravelOutline fontSize={20} />
            机票
          </span>
          <span className={styles.er}>
            <BillOutline fontSize={20} />
            火车票
          </span>
          <span className={styles.er}>
            <GlobalOutline fontSize={20} />
            汽车·船
          </span>
        </Space>
        <Space style={{ "--gap": "2px" }}>
          <span className={styles.hh}>住宿</span>
          <span className={styles.ss}>
            <CalendarOutline fontSize={20} />
            酒店
          </span>
          <span className={styles.ss}>
            <CollectMoneyOutline fontSize={20} />
            海外住宿
          </span>
          <span className={styles.ss}>
            <TransportQRcodeOutline fontSize={20} />
            民宿·公
          </span>
          <span className={styles.ss}>
            <UnlockOutline fontSize={20} />
            钟点房
          </span>
        </Space>
      </div>
      <div style={{ margin: "10px" }}>
        <Swiper loop autoplay>
          {items}
        </Swiper>
      </div>
    </div>
  );
}

export default Index;
export const loader = async () => {
  let { data: res } = await getSwiper();
  let { data: ree } = await getLocation();
  return { swiper: res, location: ree.city };
};
